<template>
    <img :src="icon" :width="width" :height="height" :grid="grid" @down="doDown" @up="doUp" @out="doOut" @load="onLoad">
        <txt @bind="txtNode" :text="title" :x="txtX" :y="txtY" :size="txtSize" :color="txtColor"></txt>
    </img>
    <audio :src="audio" loop="false" play="false"></audio>
</template>

<script>
    init(){
        this.icon= "";
        this.title= "";
        this.audio= "res/audio/click.mp3";
        this.txtNode= null;
        this.txtX= 20;
        this.txtY= 10;
        this.txtSize= 12;
        this.txtColor = "#ffffff";
        this.grid= [];
        this.isDown= false;
        this.color = "";
    }

    create() {
        this.txtSize = Math.floor(this.height / 2.3);
        this.txtX = (this.width - this.txtNode.width) / 2;
        this.txtY = (this.height - this.txtNode.height) / 2;
    }

    update(delta) {
        
    }

    destroyed() {

    }
    
    onLoad(texture){
        if(!this.width || !this.height){
            this.width = texture.width;
            this.height = texture.height;
            this.create();
        }
    }

    doDown(event){
        if(this.isDown == false){
            this.isDown = true;
		    //this.x += 1;
		    //this.y += 1;
            this.color = "#AAAAAAEE";
        }
    }

    doUp(event){
        if(this.isDown == true){
		    //this.x -= 1;
		    //this.y -= 1;
            this.isDown = false;
            this.color = "";
        }
    }

    doOut(event){
        this.doUp();
    }
</script>